<template>
	<view class="confirmBox">
		<view class="Content">
			<view class="headImg">
				<img :src="doctorMessage.doctorIcon" alt="" />
			</view>
			<view class="leftContent">
				<view class="topRegistration">
					<view
						class="leftTitle"
						style="font-size: 35rpx; color: #000; font-weight: bolder"
					>
						<!-- <text class="sizeStyle">专</text> -->
						{{ doctorMessage.deptName }}</view
					>
				</view>
				<view class="introduce">
					<view
						class="box"
						style="font-size: 30rpx; color: #000; font-weight: bolder"
						>{{ doctorMessage.doctorName }}</view
					>
					<view>{{ doctorMessage.position }}</view>
				</view>
				<view class="men">
					<view class="box">
						<!-- 西安交通大学第一附属医院 -->
						<text>{{ doctorMessage.deptName }}</text></view
					>
				</view>
			</view>
		</view>
		<!-- 患者信息 -->
		<view class="messageList">
			<view class="messageView">
				<view class="title">预约时间</view>
				<view style="color: #ff5200"
					><text>{{ timeQuantum }}</text
					><text style="margin-left: 10rpx">{{ dateList }}</text></view
				>
			</view>
			<view class="messageView">
				<view class="title">就诊卡</view>
				<view style="color: #000; word-wrap: break-word; overflow: hidden"
					><text>{{ patientName }}</text>
					<text style="margin-left: 10rpx">{{ patientcardNo }}</text></view
				>
			</view>
			<view class="messageView">
				<view class="title">证件号</view>
				<view style="color: #000">{{ patientIdentity }}</view>
			</view>
			<view class="messageView">
				<view class="title">手机号</view>
				<view style="color: #000">{{ patientTelephone }}</view>
			</view>
			<view class="messageView">
				<view class="title">挂号费</view>
				<view style="color: #ff5200">￥{{ registerFee }}</view>
			</view>
			<view class="messageView">
				<view class="title">预检单</view>
				<view style="color: #586fe4">《发热/普通门诊患者预检筛查表》</view>
			</view>
		</view>
		<!-- 协议 -->
		<view style="margin: 15px 0; color: #a5a59e"
			>确认预约即代表您已阅读并同意<text style="color: #586fe4"
				>《挂号协议》</text
			>和<text style="color: #586fe4">《预约规则》</text></view
		>
		<view>
			<u-button type="primary" @click="confirm" :disabled="disabled"
				>确认预约</u-button
			>
		</view>

		<!-- 温馨提示 -->
		<view class="title">
			<view style="color: #f76c2b">温馨提示</view>
			<view
				>1.在就诊日正常上班时间无卡预约的患者提供身份证，就诊卡号，以及注册手机到自助机办理预约取卡!</view
			>
			<view
				>2.有卡的患者直接去科室自助机签到就诊,预约订单在就诊日有效时间为30分钟,请按时到医院就诊并支挂号费用!</view
			>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { orderAndRegister, orderAndRegisterFront } from '../../http/api.js'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			doctorMessage: [],
			// 日期
			timeQuantum: '',
			// 时间
			dateList: '',
			//id
			doctorID: '',
			/**
			 * 班次
			 */
			// timeQuanNumber: '',
			//就诊类型
			visitType: '',
			registerType: '1',
			// 费用
			registerFee: '',
			// 医生名称
			doctorName: '',
			// 缴费状态
			chargeFlag: '0',
			// 科室名称
			deptName: '',
			// 科室ID
			deptID: '',
			// 机构名称
			// orgName: '',
			// orgId: '376404388298534913',
			registerCategory: '',
			clinicId: '',
			clinicTimeId: '',
			orderNo: '',
			ampm: '',
			timeSerialNumber: '',
			endTime: '',
			// 支付
			itemCode: '',
			itemClass: '',
			// 订单号
			orderNoNumber: '',
			doctorTitle: '',
			disabled: false,
		}
	},
	onLoad(option) {
		// console.log(option.parameter, '1')
		console.log(JSON.parse(option.parameter), '123')
		let parameter = JSON.parse(option.parameter)
		this.doctorMessage = parameter.doctorMessage
		this.doctorName = parameter.doctorMessage.doctorName
		this.deptName = parameter.doctorMessage.deptName
		this.timeQuantum = parameter.newDate
		this.dateList = parameter.dateList.name
		this.endTime = parameter.dateList.endTime
		this.doctorID = parameter.doctorID
		this.visitType = parameter.visitType
		this.deptID = parameter.deptID
		this.registerFee = parameter.registrationFee
		this.clinicId = parameter.clinicId
		this.clinicTimeId = parameter.clinicTimeId
		// this.orderNo = parameter.orderNo
		this.ampm = parameter.startTime
		this.timeSerialNumber = parameter.timeSerialNumber

		this.itemCode = parameter.itemCode
		this.itemClass = parameter.itemClass
		this.doctorTitle = parameter.doctorTitle
		console.log(parameter.id, '医生id')
	},
	computed: {
		...mapState({
			patientId: state => state.patientId,
			// 卡id
			CardId: state => state.CardId,
			// 姓名
			patientName: state => state.patientName,
			// 身份证号
			patientIdentity: state => state.patientIdentity,
			// 手机号
			patientTelephone: state => state.patientTelephone,
			// 就诊卡cardNo
			patientcardNo: state => state.patientcardNo,
			// 机构名
			curHos: state => state.curHos,
			// 性别
			patientGender: state => state.patientGender,
			userId: state => state.userId,
			orgCode: state => state.orgCode,
			orgId: state => state.orgId,
		}),
	},
	methods: {
		confirm() {
			let submit = {
				orgId: this.orgId,
				payTypes: '6',
				deptId: this.deptID,
				orgName: this.curHos,
				orgCode: this.orgCode,
				visitType: this.visitType,
				deptName: this.deptName,
				registerType: this.registerType,
				registerDate: this.timeQuantum,
				timeSlot: this.dateList,
				doctorId: this.doctorID,
				doctorName: this.doctorName,
				registerFee: this.registerFee,
				chargeFlag: this.chargeFlag,
				cardId: this.CardId,
				patientId: this.patientId,
				scheduleId: this.clinicId,
				clinicTimeId: this.clinicTimeId,
				cardId: this.CardId,
				patientName: this.patientName,
				idCardNo: this.patientIdentity,
				phone: this.patientTelephone,
				visitCardNo: this.patientcardNo,
				patientSex: this.patientGender,
				// orderNo: this.orderNo,
				userId: this.userId,
				// cardNo:this.patientcardNo,
				// userId
				// orgCode: this.orgCode,
				ampm: this.ampm,
				scheduleTimeSn: this.timeSerialNumber,
				// 开始时间结束时间
				serviceStartTime: this.dateList,
				serviceEndTime: this.endTime,
				itemCode: this.itemCode,
				itemClass: this.itemClass,
				registerCategory: this.doctorTitle,
			}
			this.disabled = true
			console.log(submit)
			orderAndRegisterFront(submit)
				.then(({ data, head }) => {
					console.log(data)
					submit.tradeOrderId = data.orderId
					submit.tradeOrderNo = data.orderNo
					this.orderNoNumber = data.orderNo
					if (head.code == 200) {
						this.$pay(data).then(success => {
							console.log(submit, '123', data)
							this.$refs.uToast.show({
								title: '预约成功',
								type: 'success',
								isTab: true,
								duration: 1000,
								url: '/pages/index/index',
							})
							// orderAndRegister(submit).then(data => {
								console.log(data)
								// if (data.head.code == 200) {
									// console.log(this.orderNoNumber, '订单号')
									this.$refs.uToast.show({
										title: '预约成功',
										type: 'success',
										isTab: true,
										duration: 1000,
										url: '/pages/index/index',
									})
								// } else {
								// 	this.$refs.uToast.show({
								// 		title: data.head.msg,
								// 		type: 'error',
								// 		isTab: true,
								// 	})
								// 	return
								// }
							// })
						})
					} else {
						this.$refs.uToast.show({
							title: head.msg,
							type: 'error',
							isTab: true,
						})
					}
					this.disabled = false
				})
				.catch(() => {
					this.disabled = false
				})
		},
	},
}
</script>

<style lang="scss">
page {
	background: #cccccc85;
}
.confirmBox {
	padding: 25rpx;
	.Content {
		display: flex;
		padding: 35rpx;
		border-bottom: 1px solid #cccccc;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 15rpx;
		.headImg {
			display: flex;
			align-items: center;
			margin-right: 25rpx;
			img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.leftContent {
			width: 100%;
			.topRegistration {
				display: flex;
				align-items: center;
				.leftTitle {
					flex: 1;
					.sizeStyle {
						display: inline-block;
						width: 44rpx;
						text-align: center;
						background-color: #0089ff;
						color: aliceblue;
						margin-right: 4rpx;
					}
				}
			}
			.introduce {
				view {
					display: inline-block;
				}
				.box {
					margin-right: 20rpx;
				}
			}
		}
	}
	.messageList {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		.messageView {
			display: flex;
			font-weight: bold;
			padding: 30rpx 0;
			flex-wrap: wrap;
			.title {
				flex: 1;
			}
		}
	}
	.title {
		view {
			color: #cccccc;
			margin-top: 35rpx;
		}
	}
}
</style>